// import React from 'react';
// import ReactDOM from 'react-dom';

// const Demo = React.createClass({
//     render(){
//         return(
//             <div>222222</div>
//         )
//     }
// });
// export default Demo

import React from 'react';
import ReactDOM from 'react-dom';
import { Checkbox, Form, Row, Col, Popover, Modal, Radio } from 'antd'
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
import HouseDecActions from './actions/houseDecActions';

const Demo = React.createClass({
  getInitialState() {
    return {
      costList:[],//收费项列表
      checkedCostList:[],//选中的收费项
      confirmChecked:[], //点击确定按钮后，选中的收费项
      tags:[],
      checkedCostNew: [],
      allCostList: {},
      unit1:[],
      unit2:[],
      unit3:[],
      unit1Radio: [],
      unit2Radio: [],
      unit3Radio: [],
      unit1Checked:'',
      unit2Checked:'',
      unit3Checked:'',
    }
  },

  componentWillReceiveProps(nextProps){
    let tags = [];
    let checkedCostNew = nextProps.checkedCostNew;
    if(checkedCostNew){
      tags = checkedCostNew.classify1;
    }
    this.getUnit(nextProps.allCostList);
    this.getCheckedId(nextProps.checkedCostNew);
    this.setState({
      costList:nextProps.costList,
      confirmChecked:nextProps.confirmChecked,
      checkedCostList: nextProps.confirmChecked,
      visible:nextProps.visible,
      tags: tags,
      allCostList: nextProps.allCostList,
      checkedCostNew: nextProps.checkedCostNew
    });
  },

  // 判断对象是否为空
  isEmptyObject(e) {  
      var t;  
      for (t in e)  
          return !1;  
      return !0  
  }, 
  getCheckedId(data){
      let unit1Checked = '';
      let unit2Checked = '';
      let unit3Checked = '';
      if(!this.isEmptyObject(data)){
          let classify2 = data.classify2;
          if(!this.isEmptyObject(classify2)){
              unit1Checked = classify2.unit1.length> 0?classify2.unit1[0]: '';
              unit2Checked = classify2.unit2.length> 0?classify2.unit2[0]: '';
              unit3Checked = classify2.unit3.length> 0?classify2.unit3[0]: '';
              this.setState({
                  unit1Checked: unit1Checked,
                  unit2Checked: unit2Checked,
                  unit3Checked: unit3Checked
              });
          }
      }
      
  }, 
  getUnit(data){
      let unit1 = [];
      let unit2 = [];
      let unit3 = [];
      
      if(!this.isEmptyObject(data)){
          let classify2 = data.classify2;
          if(!this.isEmptyObject(classify2)){
              
              
              unit1Radio = this.getRadioData(classify2.unit1);
              unit2Radio = this.getRadioData(classify2.unit2);
              unit3Radio = this.getRadioData(classify2.unit3);

              this.setState({
                  unit1: classify2.unit1,
                  unit2: classify2.unit2,
                  unit3: classify2.unit3,
                  unit1Radio: unit1Radio,
                  unit2Radio: unit2Radio,
                  unit3Radio: unit3Radio,
              });
          }
          
      }
      
  },
  // 构建radio
  getRadioData(data){
      let radioData = data;
      let radioArry = [];
      if(radioData.length > 0){
          radioData.forEach((item) => {
              let key = `${item.value}`;
              let content = (
                  <Radio key={key} value={key} >{item.label}</Radio>
              );
              radioArry.push(content); 
          });          
      }
      return radioArry
  },

  // 获取选中的收费项数组
  onChange(checkedValues){
    this.setState({
      checkedCostList:checkedValues,
      tags:checkedValues
    });
  },

  handleCancel(){
      this.props.hideModal();
  },

  pushArry(checkedId, target, data){  
    let flag = 0;
    let index;
    if(data){
        data.forEach((item) => {
            if(target.indexOf(item.value) != '-1'){ //存在
                flag = 1;
                index = target.indexOf(item.value)
            }
        })
    } 
    if(flag == 1){
        target.splice(index,1)
    }
    if(checkedId){
        target.push(checkedId);
    }
    
    return target
  },
  handleOk(){
      let checkedCostList = this.state.checkedCostList;
      checkedCostList = this.pushArry(this.state.unit1Checked, checkedCostList, this.state.unit1);
      checkedCostList = this.pushArry(this.state.unit2Checked, checkedCostList, this.state.unit2);
      checkedCostList = this.pushArry(this.state.unit3Checked, checkedCostList, this.state.unit3);
     
      this.props.getCheckedCostList(checkedCostList);
      this.props.getCheckedCostNew(checkedCostList);

      this.props.addCost(checkedCostList);
      this.props.hideModal();
  },

  onChangeRadio(obj, e){
      let type = obj.type;
      switch(type) {
          case 'unit1':
              this.setState({
                  unit1Checked: e.target.value,
              });
              break;
          case 'unit2':
              this.setState({
                  unit2Checked: e.target.value,
              });
              break;
          case 'unit3':
              this.setState({
                  unit3Checked: e.target.value,
              });
              break;

      }
  },

  render () {

    let classify1 = this.state.allCostList?this.state.allCostList.classify1:[];
    let options = [];
    let obj = {
      label:'',
      value:''
    }
    if(classify1){
      classify1.forEach((item) =>{
        // let k = 0;
        // let content = (
        //   <div style={{minWidth:300}}>
        //     {
        //       item.ladderList.length > 0 ?
        //         <div>
        //           <Row>
        //             <Col span={6}>
        //               阶梯开始
        //             </Col>
        //             <Col span={6}>
        //               阶梯结束
        //             </Col>
        //             <Col span={6}>
        //               单价
        //             </Col>
        //             <Col span={6}>
        //               状态
        //             </Col>
        //           </Row>
        //           {
        //             item.ladderList.map(ladderListItem =>{
        //               return (
        //                 <Row key = {`ladderList${k++}`}>
        //                   <Col span={6}>
        //                     {ladderListItem.ladderStart}
        //                   </Col>
        //                   <Col span={6}>
        //                     {ladderListItem.ladderEnd}
        //                   </Col>
        //                   <Col span={6}>
        //                     ￥{ladderListItem.price}
        //                   </Col>
        //                   <Col span={6}>
        //                     {ladderListItem.status == 1? '启用':'禁用'}
        //                   </Col>
        //                 </Row>
        //               )
        //             })
        //           }
        //         </div>

        //         :<div>暂无阶梯收费详细信息</div>
        //     }
        //   </div>
        // );
        // let popover = (
        //   <span>
        //       {item.costName}:
        //       <Popover placement="right" content={content} title="阶梯收费" trigger="hover">
        //         <a> 阶梯收费</a>
        //       </Popover>
        //     </span>
        // )
        //let labelText = item.chargeType != 2 ? (item.costName + (item.price ? item.price : 0) +'元/'+ item.unitName) : (popover);
        // obj = {
        //   label:labelText,
        //   value:`${item.id}`,
        //   id:`id${item.id}`,
        // }
        // options.push(obj);

        
      });
    }
    
   
    return (
      <Modal title="选择收费项" visible={this.state.visible}
                   onOk={this.handleOk} onCancel={this.handleCancel}
            >
            
        <Form className="checkbox-form" form={this.props.form}>    
          <h5>固定</h5>
          <CheckboxGroup options={classify1} onChange={this.onChange} value={this.state.tags}  />

          <h5>仪表</h5> 
          <div style={{marginBottom:10}}> 
            <span>电费：</span>
            {
                this.state.unit1Radio.length> 0?
                <RadioGroup onChange={this.onChangeRadio.bind(this, {type: 'unit1'})} value={this.state.unit1Checked}>
                    {
                        this.state.unit1Radio
                    }
                </RadioGroup>:
                <span style={{color:'lightgray'}}>暂无数据</span>
            }
            
          </div>
          <div style={{marginBottom:10}}>  
            <span>水费：</span>
            {
                this.state.unit2Radio.length> 0?
                <RadioGroup onChange={this.onChangeRadio.bind(this, {type: 'unit2'})} value={this.state.unit2Checked}>
                    {
                        this.state.unit2Radio
                    }
                </RadioGroup>:
                <span style={{color:'lightgray'}}>暂无数据</span>
            }
            
          </div>

          <div style={{marginBottom:10}}> 
            <span>天然气：</span>
            {
                this.state.unit3Radio.length> 0?
                <RadioGroup onChange={this.onChangeRadio.bind(this, {type: 'unit3'})} value={this.state.unit3Checked}>
                    {
                        this.state.unit3Radio
                    }
                </RadioGroup>:
                <span style={{color:'lightgray'}}>暂无数据</span>
            }
            
          </div>
        </Form>
      </Modal>
    );
  }
});

export default Demo